<template>
  <!-- <el-form label-width="80px" class="bx p10px" style="height: 370px;overflow:auto; padding-right:10px"> -->
  <el-card style="margin: 10px" class="cardFlex">
    <div class="x wf js zb">
      <el-form-item label="列次" style="min-width: 220px">
        <!-- <sProject1 :value="project.id?project.id:project.name" @change="change(3,$event)" /> -->
        <el-input placeholder="请输入 列次名称" v-model="project.name" @blur="change(1)" />
      </el-form-item>
      <el-input v-model="suid" placeholder="请输入物料号" class="suid" clearable />

      <el-form-item label="隶属部门" style="min-width: 220px">
        <sUserType v-model="project.userType" @change="change(4,$event)" />
      </el-form-item>
    </div>
    <div class="el-form-item formItemFlex" style="margin:0px;">
      <div class="y jc zc">
        <label class="el-form-item__label" style="width: 80px;" v-text="'所需物料'" />
        <el-button type="success" @click="change(2)" size="mini" v-text="'新增一行'" />
        <div class="m10px">
          <vue-xlsx-table @on-select-file="inItems">导入单列物料</vue-xlsx-table>
        </div>
      </div>
      <div class="el-form-item__content y jc oh">
        <pItem :value="project.items" @change="change(0,$event);" />
      </div>
    </div>
  </el-card>
  <!-- </el-form> -->
</template>
<script>
import sProject1 from "../../select/sProject1";
import sUserType from "../../select/sUserType";
import pItem from "./pItem";
export default {
  components: { sProject1, sUserType, pItem },
  props: {
    value: { default: false }
  },
  watch: {
    value(a) {
      this.first();
    },
    suid(a) {
      if (a) {
        let t = this.$cp(this.project.items);
        let r = [];
        let ur = [];
        let i = 0;
        for (i = 0; i < t.length; i++) {
          if (t[i].uid.indexOf(a) >= 0) {
            r.push(t[i]);
          } else ur.push(t[i]);
        }
        r.push.apply(r, ur);
        this.project.items = r;
      }
    }
  },
  data() {
    return {
      project: {},
      suid: ""
    };
  },
  // computed() {return{}},
  created() {
    this.first();
  },
  methods: {
    first() {
      if (this.value) this.project = this.value;
      // console.log(this.$cp(this.project));
    },
    change(a, b, c, d) {
      let t = {};
      switch (a) {
        case 0:
          this.project.items = b;
          break;
        case 1: // 修改列名
          t = this.$gd.project.getItem({
            name: this.project.name,
            pid: this.project.pid
          });
          this.project.id = t ? t.id : 0;
          break;
        case 2: // 新增一行
          this.project.items.push({});
          break;
        case 3:
          this.project.id = undefined;
          if (typeof b == "string") this.project.name = b;
          else if (typeof b == "number") this.project.id = b;
          else this.project.name = undefined;
          break;
        case 4:
          this.project.userType = b;
          break;

        default:
          break;
      }
      // console.log(this.$cp(this.project));
      this.$emit("change", this.project);
    },
    inItems(a) {
      let i = 0;
      let j = 5;
      let t = ["物料工序", "物料编号", "物料名称", "物料型号", "预计用量"];
      for (i = 0; i < a.header.length; i++) {
        if (t.indexOf(a.header[i]) >= 0) j--;
      }
      if (j) {
        this.$message.error("导入表格数据 表头必须包含 " + JSON.stringify(t));
        return;
      }
      this.project.items = [];
      a.body.forEach(item => {
        this.project.items.push({
          process: item.物料工序,
          uid: item.物料编号,
          name: item.物料名称,
          model: item.物料型号,
          sum: item.预计用量
        });
      });
      // console.log(this.$cp(this.project));
      this.$emit("change", this.project);
    }
  }
};
</script>

<style scoped>
.suid {
  width: 200px;
}
</style>
